<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/index.css">
    <title>Zvossen</title>
</head>
<body>
    <div class="big">
        <!-- 头部 -->
        <div class="head">
            <div class="top-head">
                <div class="top-img">
                    <a href="#"><img src="../image/facebook.png" alt="facebook"></a>
                    <a href="#"><img src="../image/twitter.png" alt="twitter"></a>
                    <a href="#"><img src="../image/google.png" alt="google"></a>
                    <a href="#"><img src="../image/pinterest.png" alt="pinterest"></a>
                    <a href="#"><img src="../image/instagram.png" alt="instagram"></a>
                </div>
                <div class="top-font"><p class="web">ContacUst@Gmail.com</p><p class="phone">80 8888 08</p></div>
            </div>
        </div>
         <!-- NAV -->
         <div class="nav1">
            <div class="nav">
                <div class="logo"><img src="../image/logo.png" alt=""></div>
                <div class="navs">
                    <a href="../html/index.html">HOME</a>
                    <a href="../html/blog.html">BLOG</a>
                    <a href="../html/about.html">ABOUT US</a>
                    <a href="../html/content.html">CONTACT</a>
                </div>
            </div>
         </div>
        <!-- header -->
        <div class="header">
            <h1>SEE THE WORD DIFFERENTLY</h1>
            <p>design and book travel experiences as unique as you are</p>
            <div class="header-input"><input type="text" size="40px" placeholder="Where are you going ?"><button><img src="../image/search-dark.png">Search</button></div>
            <ul>
                <li><a href="#">TOP DESTINATION :</a></li>
                <li><a href="#">PARIS</a></li>
                <li><a href="#">NEW YORK</a></li>
                <li><a href="#">LONDON </a></li>
                <li><a href="#">ROME</a></li>
                <li><a href="#">SAN</a></li>
                <li><a href="#">FRANCISCO</a></li>
                <li><a href="#">MORE...</a></li>
            </ul>
        </div>
        <!-- main -->
        <div class="main">
            <div class="main-three">
                <div class="main-three1"><img src="../image/2.jpg" alt=""><h3>Civita di Bagnoregio, Italia</h3><div class="data"><p>April 14, 2015</p><p>Uploaded by <a href="#">John Doe</a></p></div></div>
                <div class="main-three1"><img src="../image/3.jpg" alt=""><h3>Civita di Bagnoregio, Italia</h3><div class="data"><p>April 14, 2015</p><p>Uploaded by <a href="#">John Doe</a></p></div></div>
                <div class="main-three1"><img src="../image/4.jpg" alt=""><h3>Civita di Bagnoregio, Italia</h3><div class="data"><p>April 14, 2015</p><p>Uploaded by <a href="#">John Doe</a></p></div></div>
            </div>
        </div>
        <!-- ABOUT US -->
        <div class="about">
            <div class="about-main">
                <h3>ABOUT US </h3>
                <div class="line"></div>
                <p>Nulla eget mauris quis elit mollis ornare vitae ut odio. Cras tincidunt, augue vitae sollicitudin commodo, quam elit varius est, et ornare ante massa quis tellus. Mauris nec lacinia nisl. Curabitur tempus tellus et vulputate vestibulum.</p>
                <div class="about-three">
                    <div class="about-three1"><div class="circle"><img src="../image/Folded.png" alt=""></div><h4><a href="#"> Lorem ipsum dolor</a></h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p></div>
                    <div class="about-three1"><div class="circle"><img src="../image/Location.png" alt=""></div><h4><a href="#"> Lorem ipsum dolor</a></h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p></div>
                    <div class="about-three1"><div class="circle"><img src="../image/User.png" alt=""></div><h4><a href="#"> Lorem ipsum dolor</a></h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p></div>
                </div>
                <div class="more"><button>MORE</button></div>
            </div>
            <div class="about-main-end"><p>Curabitur pharetra sed magna at tincidunt. Maecenas auctor tincidunt ex. Aliquam a vestibulum Donec diam ipsum euismod.</p></div>
        </div>
        <!-- SERVICES -->
        <div class="services">
            <div class="service-main">
                <h3>SERVICES</h3>
                <div class="line"></div>
                <p>Nulla eget mauris quis elit mollis ornare vitae ut odio. Cras tincidunt, augue vitae sollicitudin commodo, quam elit varius est, et ornare ante massa quis tellus. Mauris nec lacinia nisl. Curabitur tempus tellus et vulputate vestibulum.</p>
                <div class="service-main-four">
                    <div class="service-main-four1"><img src="../image/truck.png" alt=""><h3><a href="#">Henderit Mauris</a></h3><p>Praesent vestibuluolestie lacus</p></div>
                    <div class="service-main-four1"><img src="../image/Airplane.png" alt=""><h3><a href="#">Henderit Mauris</a></h3><p>Praesent vestibuluolestie lacus</p></div>
                    <div class="service-main-four1"><img src="../image/Taxi.png" alt=""><h3><a href="#">Henderit Mauris</a></h3><p>Praesent vestibuluolestie lacus</p></div>
                    <div class="service-main-four1"><img src="../image/transport.png" alt=""><h3><a href="#">Henderit Mauris</a></h3><p>Praesent vestibuluolestie lacus</p></div>
                    <div class="service-main-four1"><img src="../image/Cogwheel.png" alt=""><h3><a href="#">Henderit Mauris</a></h3><p>Praesent vestibuluolestie lacus</p></div>
                    <div class="service-main-four1"><img src="../image/package.png" alt=""><h3><a href="#">Henderit Mauris</a></h3><p>Praesent vestibuluolestie lacus</p></div>
                    <div class="service-main-four1"><img src="../image/Flights.png" alt=""><h3><a href="#">Henderit Mauris</a></h3><p>Praesent vestibuluolestie lacus</p></div>
                    <div class="service-main-four1"><img src="../image/Landing.png" alt=""><h3><a href="#">Henderit Mauris</a></h3><p>Praesent vestibuluolestie lacus</p></div>
                </div>
            </div>
            <div class="about-main-end"><p>Curabitur pharetra sed magna at tincidunt. Maecenas auctor tincidunt ex. Aliquam a vestibulum Donec diam ipsum euismod.</p></div>
        </div>
        <!-- Latest News -->
        <div class="news">
            <div class="news-left">
                <div class="news-left-top"><div class="img1"><img src="../image/16.jpg" alt=""></div><div class="font"><h3><a href="#">Nam libero tempore, cum soluta nobis</a></h3><span>By <a href="#">Danny</a> on April 14, 2015</span><p>Nam libero tempore, cum soluta nobis est eligendi optio cumque quod maxime placeat facere possimus nihil impedit quo minus id quod maxime placeat facere possimus.</p></div></div>
                <div class="news-left-bottom">
                    <div class="news-left-bottom1"><img src="../image/17.jpg" alt=""><h3>Nam libero tempore, cum soluta nobis</h3></div>
                    <div class="news-left-bottom1"><img src="../image/10.jpg" alt=""><h3>Nam libero tempore, cum soluta nobis</h3></div>
                    <div class="news-left-bottom1"><img src="../image/8.jpg" alt=""><h3>Nam libero tempore, cum soluta nobis</h3></div>
                </div>
            </div>
            <div class="news-right">
                <h2>Latest News</h2>
                <div class="lines"><div class="orange1"></div><div class="gray"></div></div>
                <p><a href="#">> Lorem ipsum dolor sit amet, consectetur elit.</a></p>
                <p><a href="#">> Nullam venenatis lacus fermentum.</a></p>
                <p><a href="#">> Lorem ipsum dolor sit amet, consectetur elit.</a></p>
                <p><a href="#">> Lorem ipsum dolor sit amet, consectetur elit.</a></p>
                <p><a href="#">> Integer a enim ac ex porta molestie ut at ex.</a></p>
                <p><a href="#">> Nullam venenatis lacus fermentum.</a></p>
                <p><a href="#">> Lorem ipsum dolor sit amet, consectetur elit.</a></p>
            </div>
        </div>
        <!-- footer -->
        <div class="footer">
            <div class="footer_main">
                <div class="footer_main_three">
                    <div class="footer_main_three1"><img src="../image/logo2.png" alt=""><p>Nam libero tempore, cum soluta nobis est eligendi optio cumque quod maxime placeat cum soluta nobis facere possimus nihil impedit quo minus id quod maxime placeat facere possimus. est eligendi optio cumque</p><p>facere possimus nihil impedit quo minus id quod maxime placeat facere possimus.</p></div>
                    <div class="footer_main_three1"><h2>Latest News</h2><div class="lines"><div class="orange1"></div><div class="gray"></div></div><p>facere possimus nihil impedit quo minus id quod maxime placeat facere possimus. est eligendi</p><input placeholder="Enter your email address...  "><a href="#"><button>Subcribe Now</button></a></div>
                    <div class="footer_main_three1"><h2>Latest News</h2><div class="lines"><div class="orange1"></div><div class="gray"></div></div><div class="footer_main_three1_imgs"><img src="../image/2.jpg" alt=""><img src="../image/3.jpg" alt=""><img src="../image/4.jpg" alt=""><img src="../image/5.jpg" alt=""></div></div>
                  
                </div>
            </div>
            <div class="footer_bottom">??2015 - Designed by <a href="#">ZEROTHEME</a></div>
        </div>
    </div>
</body>
</html>